<template>
    <div class="panel_snow">
        <div class="snow"></div>
    </div>
</template>


<script>
    export default {
        mounted(){
            this.createSnow();
        },
        methods: {
            createSnow() {
                let i = 500;//添加雪球的个数
                for (; i > 0; i--) {
                    $('.panel_snow').append('<div class="snow"></div>');
                }
            }
        }
    }

</script>

<style lang="scss">
    .panel_snow {
        width: 100%;
        /*height: 100%;*/
        overflow: hidden;
    }

    .snow {
        position: fixed;
        width: 10px;
        height: 10px;
        background: white;
        border-radius: 50%;
    }


    @for $i from 1 through 501 {
        $snow_opacity: random(); //雪花透明度
        $snow_scale: random(); //雪花缩放比
        $snow_fall_time: 40- random(20)+s; //整个下落过程的总时间

        //延迟时间，例如设置成10s,雪花将会在10s后开始下落，设为-10s则在打开后雪花是已经下落了10s的状态
        $snow_delay_time: (-25)  + random(50)+s;

        //雪花的初始高度（离顶部的高度）
        $snow_height: 90- random(70);
        $fall_percent: $snow_height+'%';
        $fall_from_vh: $snow_height+vh;


        //雪花初始位置、动画开始位置、结束的偏移位置需要有所区别，才有左右飘动的感觉
        $fall_keyframes: random(100);
        $fall_from_vw: $fall_keyframes+random(15)+vw;
        $fall_tran_to: $fall_keyframes+random(15)+vw;
        $fall_tran_ch: $fall_keyframes+random(25)+vw;


        .snow:nth-child(#{$i}) {
            opacity: $snow_opacity;
            //定义2D转换与缩放比：
            transform: translate($fall_tran_ch, -10px) scale($snow_scale);
            //linear动画从头到尾的速度是相同的，infinite无限次播放：
            animation: fall-#{$i} $snow_fall_time $snow_delay_time linear infinite;
        }

        @keyframes fall-#{$i} {
            #{$fall_percent} {
                transform: translate($fall_from_vw, $fall_from_vh) scale($snow_scale);
            }
            to {
                transform: translate($fall_tran_to, 100vh) scale($snow_scale);
            }
        }

    }

</style>
